<template>
  <div class="datacount" style="display:flex">
    <div class="datacount_tabs" style="height:100px">
     <div style="display:flex">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane @click="yesterdayhandel" label="昨日" name="first">

  </el-tab-pane>

    <el-tab-pane @click="seventdayhandel" label="近7日" name="second">

    </el-tab-pane>
    <el-tab-pane label="近30日" name="third">

    </el-tab-pane>

    <el-tab-pane @click="nowMonth" label="本月" name="fourth">

    </el-tab-pane>

  </el-tabs>

     <div  class="datacount_datetime">
      <span>已选时间：</span>
       <!-- 昨天时间 -->
      <span v-if="isshow1===true">{{yesterday}}</span>
      <!-- 7天 -->
      <span v-else-if="isshow2===true">{{nowday}}至{{seventday}}</span>
      <!-- 30天 -->
      <span v-else-if="isshow3===true">{{thirtydays}}至{{nowday}}</span>
       <!-- 本月 -->
      <span v-else-if="isshow4===true">{{firstDayOfMonth}}至{{lastDayOfMonth}}</span>
      </div>

      <!-- 数据导出 -->

      <div class="data_export" >
       <el-button style="background-color:white" class="data_export_btu"><i  class="iconfont icon-daochu"></i> 数据导出</el-button>
     </div>

  </div>

   <div>
      <div class="datacount_tabs_top" style="display:flex">
           <!-- 营业额统计 -->
        <div style="padding-right:23px" ><Business ></Business></div>
        <!-- 用户统计 -->
        <div ><Usercount></Usercount></div>
        </div>

       <div class="datacount_tabs_bottom" style="display:flex">
         <!-- 订单统计 -->
       <div style="padding-right:23px"><OrderCount></OrderCount></div>
        <!-- 排行榜 -->
      <div><Ranking></Ranking></div>
         </div>
    </div>

</div>

  </div>

</template>

<script>
import moment from 'moment'
import Business from '@/components/main/datacount/business_volume.vue'
import Usercount from '@/components/main/datacount/usercount.vue'
import OrderCount from '@/components/main/datacount/orderCount.vue'
import Ranking from '@/components/main/datacount/ranking.vue'
import { tutrnoverStatistics, usercount, orderCount, ranking } from '@/api/count'
import Bus1 from '@/utils/EventBus'
export default {
  name: 'datacountIndex',
  components: {
    Business,
    Usercount,
    OrderCount,
    Ranking
  },
  data () {
    return {
      activeName: 'second', // 选中哪个
      nowday: '', // 当前系统日期
      yesterday: '', // 昨天
      seventday: '', // 第七天
      thirtydays: '', // 第30天
      firstDayOfMonth: '', // 当月第一天
      lastDayOfMonth: '', // 当月最后一天
      isshow1: false,
      isshow2: true,
      isshow3: false,
      isshow4: false,
      turnoverdata: {} // 营业额统计
    }
  },

  created () {
    // 获取当前时间
    const now = moment()
    this.nowday = now.format('YYYY-MM-DD')

    // 减7天
    this.seventday = moment().subtract(7, 'days').format('YYYY-MM-DD')
    // 昨天
    this.yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD')

    // 近30天
    this.thirtydays = moment().subtract(30, 'days').format('YYYY-MM-DD')

    // 获取当前月份日期第一天
    this.firstDayOfMonth = moment().startOf('month').format('YYYY-MM-DD')
    //  获取当前月份的最后一天
    this.lastDayOfMonth = moment().endOf('month').format('YYYY-MM-DD')
    this.seventdayhandel()
  },
  methods: {
    handleClick (tab, event) {
      console.log(event.target.innerText, 'event.target.innerText')
      console.log(event.target.innerText === '昨日', 'event.target.innerText')
      if (event.target.innerText === '昨日') {
        this.isshow1 = true
        this.isshow2 = false
        this.isshow3 = false
        this.isshow4 = false
        this.yesterdayhandel()
      } else if (event.target.innerText === '近7日') {
        this.isshow1 = false
        this.isshow2 = true
        this.isshow3 = false
        this.isshow4 = false
        this.seventdayhandel()
      } else if (event.target.innerText === '近30日') {
        this.isshow1 = false
        this.isshow2 = false
        this.isshow3 = true
        this.isshow4 = false
        this.thirtydayshandel()
      } else if (event.target.innerText === '本月') {
        this.isshow1 = false
        this.isshow2 = false
        this.isshow3 = false
        this.isshow4 = true
        this.nowMonth()
      }
    },
    async yesterdayhandel () {
      const res = await tutrnoverStatistics(this.yesterday, this.yesterday)
      const res2 = await usercount(this.yesterday, this.yesterday)
      this.turnoverdata = res.data
      Bus1.$emit('turnoverdata', res.data)
      Bus1.$emit('usercount', res2.data)
      const res3 = await orderCount(this.yesterday, this.yesterday)
      Bus1.$emit('orderCount', res3.data)
      const res4 = await ranking(this.yesterday, this.yesterday)
      Bus1.$emit('ranking', res4.data)
    },
    async seventdayhandel () {
      const res = await tutrnoverStatistics(this.seventday, this.nowday)
      const res2 = await usercount(this.seventday, this.nowday)
      this.turnoverdata = res.data
      Bus1.$emit('turnoverdata', res.data)
      Bus1.$emit('usercount', res2.data)
      const res3 = await orderCount(this.seventday, this.nowday)
      Bus1.$emit('orderCount', res3.data)

      const res4 = await ranking(this.seventday, this.nowday)
      Bus1.$emit('ranking', res4.data)
    },
    async thirtydayshandel () {
      const res = await tutrnoverStatistics(this.thirtydays, this.nowday)
      const res2 = await usercount(this.thirtydays, this.nowday)
      this.turnoverdata = res.data
      Bus1.$emit('turnoverdata', res.data)
      Bus1.$emit('usercount', res2.data)
      const res3 = await orderCount(this.thirtydays, this.nowday)
      Bus1.$emit('orderCount', res3.data)
      const res4 = await ranking(this.thirtydays, this.nowday)
      Bus1.$emit('ranking', res4.data)
    },
    async nowMonth () {
      const res = await tutrnoverStatistics(this.firstDayOfMonth, this.nowday)
      const res2 = await usercount(this.firstDayOfMonth, this.nowday)
      this.turnoverdata = res.data
      Bus1.$emit('turnoverdata', res.data)
      Bus1.$emit('usercount', res2.data)
      const res3 = await orderCount(this.firstDayOfMonth, this.nowday)
      Bus1.$emit('orderCount', res3.data)
      const res4 = await ranking(this.firstDayOfMonth, this.nowday)
      Bus1.$emit('ranking', res4.data)
    }

  }
}
</script>

<style lang="less" scoped>
.datacount{
 height: 1350px;
  background-color: rgba(193, 199, 201, 0.384);

}
.datacount_tabs{
  padding-top: 20px;
   margin-left: 20px;

   position: absolute;

}

 /deep/.el-tabs__nav-wrap::after {
   // 去掉下划线
      position: static !important;
  }

 /deep/ .el-tabs__item.is-top.is-active{

     font-size: 16px;
    color: black;
    font-weight: 600;
     // 选中变色
     background-color: rgb(255,165,0);

     //width: 120px;
}

  /deep/ .el-tabs__active-bar {
  display: none; /* 隐藏激活标签的下划线 */

  }
/deep/ .el-tabs__nav.is-top{
   background-color: white;
   width:442px;

}
  //   /deep/ .el-tabs__nav-prev.is-disabled{
  //     display: none !important; /* 强制移除样式 */
  //   }
  //    /deep/ .el-tabs__nav-next{
  //   display: none !important; /* 强制移除样式 */
  //   }
/deep/ .el-icon-arrow-left::before {
  /* 去掉左括号 */
  display: none !important; /* 强制移除样式 */

}
 /deep/ .el-tabs__active-bar.is-top{
   display: none !important; /* 强制移除样式 */
}
/deep/ .el-icon-arrow-right::before{
/* 去掉左右括号 *//* 去掉左右括号 */
display: none !important;

}

 /deep/ .el-tabs__item:hover {
   //去掉鼠标悬停的效果
  color: inherit !important;
  cursor: default !important;
}

    /deep/ #tab-first{

    //昨日
    padding-left: 35px;
    padding-right: 45px;

    font-size: 16px;
    border: 1px solid rgba(0, 0, 0, 0.048);

  }

   /deep/ #tab-second{
    //近7日
    padding-left: 33px;
    padding-right: 33px;
      font-size: 16px;
     border: 1px solid rgba(0, 0, 0, 0.048);

  }

  /deep/ #tab-third{
    //近30日
    padding-left: 29px;
    padding-right: 29px;
      font-size: 16px;
    border: 1px solid rgba(0, 0, 0, 0.048);

  }

  /deep/ #tab-fourth{
    //本月
    padding-left: 37px;
    padding-right: 37px;
      font-size: 16px;
   border: 1px solid rgba(0, 0, 0, 0.048);

  }

// 中间文本

    /deep/.el-tab-pane{
    padding-top:20px;
    display: flex;
}

// 表头日期区间

.title{
  display: flex;
}
.datacount_datetime{
  height: 100px;
  width: 350px;

  padding-top: 10px;
  padding-left: 20px;
  font-size: 14px;
  color: #ccc;

}

// 数据导出
.data_export{
   margin-left: 30%;
 }
</style>
